<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .wrap {
            width: 480px;
            margin: 50px auto;
        }

        .wrap .nav {
            width: 480px;
            overflow: hidden;
            text-align: center;
            line-height: 40px;

        }

        .wrap .nav li {
            float: left;
            width: 80px;
            border: 1px solid #333;
            box-sizing: border-box;
        }

        .wrap .nav li+li {
            border-left: 0;
        }
        .wrap .nav .active{
            background-color: aquamarine;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="nav">
            <!-- <li data-index="0">link_01</li>
            <li data-index="1">link_02</li>
            <li data-index="2">link_03</li>
            <li data-index="3">link_04</li>
            <li data-index="4">link_05</li>
            <li data-index="5">link_06</li> -->

            <li>link_01</li>
            <li>link_02</li>
            <li>link_03</li>
            <li>link_04</li>
            <li>link_05</li>
            <li>link_06</li>
        </div>
    </div>
</body>
<script>
    var liList = document.querySelectorAll(".nav li");
    console.log(liList);

   /*  
   liList[0].onclick = function () {
        // this
        // liList[0].style.backgroundColor = "#6ff";
        // liList[0].style.color = "#fff";

        liList[0].setAttribute("class","active");
    }
    liList[1].onclick = function () {
         // this
        liList[1].setAttribute("class","active");
    }
    liList[2].onclick = function () {
         // this
        liList[2].setAttribute("class","active");
    } */

    // 多元素循环绑的事件的问题?
    // (1) 页面加载时,只是循环绑定事件,事件不会触发 => 循环结束后:li是最后一个li(<li>link_06</li>),i是不满足条件的第一个元素6
    // (2) 点击事件肯定发生在页面加载之后,此时点击元素后,执行事件函数中的代码 => 函数内没有定义自己的li和i => 向外跳一层找父作用域(全局作用域) =>  全局作用于此时的li和i:  <li>link_06</li>  6

    // 解决方法
    // (1) 既然li和i已经不行了,有没有替换的方案
    // li(当前被点击的元素)    => this(在事件中就是绑定事件的元素)
    // i (当前被点击的元素的下标)  => a. 通过给每个元素绑定自定义属性(记录每个元素的下标),点击时取值  b. 查找当前被点击的元素在集合中位置
    
    for(var i=0;i<liList.length;i++){
        var li = liList[i];

        // 此处在页面加载时,只是绑定事件  => 事件不会触发
        li.onclick = function(){
            // debugger;
            // 事件触发时=> 函数内没有定义自己的li和i => 向外跳一层找父作用域(全局作用域) =>  全局作用于此时的li和i:  <li>link_06</li>  6
            // li.setAttribute("class","active");
            // console.log(li,i);

            // this是函数的内置关键词 => 一般指向函数调用时依存的对象(在事件中就是绑定事件的元素 => 被点击的li)
            var index = Array.from(liList).indexOf(this);
            console.log(this,index);

            this.setAttribute("class","active");
        }
    }
    console.log("循环结束后",li,i);



    /* 
        作业:
            1. 当前被点击的导航变为活跃状态, 其他的清除活跃状态
            (1) 先清除上一个,再把当前变为活跃状态
            (2) 先清除所有的,再把当前变为活跃状态

            2. tab栏切换

            3. 简易轮播

    
    */


</script>

</html>